<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">       
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Translator App</title>
    <link rel="stylesheet" href="../assets/css/minions.css"/>  
    <link rel="icon" href="https://www.w3programmers.com/wp-content/uploads/2014/01/minion-logo.jpg" type="image/x-icon">
</head>
<body>
   
    <nav class="navigation">
        <div class="txt"><h3>Talk Like Banana</h3</div>
        </nav>
        <img src="../assets/Images/minion.png" alt="minions">
        <div class="container container-center">
    <textarea id="txt-input"
    placeholder="Enter your sentence to translate here" style="border-radius: 0.5rem;"></textarea>

<button id="btn-translate">Translate To Banana</button>

<div class="txt" style="padding-left: 1rem;"> Output will come here 👇</div>
<div id="output" style="border-radius: 0.5rem ;"></div>
</div>

<footer>
    <div style="font-size: x-large;">About</div>
    <div class="footer-header"> "Are you a fan of minions? Did you know that the gibberish they say is an actual language. Use the translator to convert your text from English to Minion speak or Banana language.The language is actually lots of languages."</div>
</footer>
<script src="../assets/js/minions.js"></script>
</body>
</html>